body {
    font-family: 'Noto Sans TC', sans-serif;
    .navbar {
        min-height: 60px;
        margin-bottom: 0;
        &.navbar-default {
            background-color: #ff1515;
            border-color: #ff1515;
            .navbar-toggle {
                &:hover {
                    background-color: #d64d4d;
                }
                &:focus {
                    background-color: #d64d4d;
                }
                .icon-bar {
                    background-color: #ffffff;
                }
            }
        }
        .navbar-collapse {
            margin-top: 10px;
            .navbar-nav {
                .active {
                    a {
                        background-color: #d64d4d;
                    }
                }
                li {
                    a {
                        color: #ffffff;
                    }
                }
            }
        }
        .navbar-brand {
            float: none;
            padding: 5px 0;
            display: block;
            margin-left: 10px;
            width: 50px;
            .nav-logo {
                width: 50px;
            }
        }
    }
    .banner {
        background-image: url(../images/banner.jpg);
        background-size: cover;
        width: 100%;
        height: 260px;
        @media screen and (min-width: 375px) {
            height: 280px;
        }
        @media screen and (min-width: 412px) {
            height: 300px;
        }
    }
    .banner1 {
        background-image: url(../images/sp01.jpg);
        background-size: cover;
        width: 100%;
        height: 220px;
    }
    .banner2 {
        background-image: url(../images/sp02.jpg);
        background-size: cover;
        width: 100%;
        height: 220px;
    }
    .banner3 {
        background-image: url(../images/sp03.jpg);
        background-size: cover;
        width: 100%;
        height: 220px;
    }
    .banner4 {
        background-image: url(../images/sp04.jpg);
        background-size: cover;
        width: 100%;
        height: 220px;
    } //common tittle
    .title {
        display: -webkit-flex;
        /* Safari */
        display: flex;
        justify-content: space-between;
        margin: 30px 0;
        h2 {
            color: #f71818;
            text-align: center;
            font-size: 22px;
        }
        .title-dec {
            width: 50px;
            height: 2px;
            border-bottom: 2px dotted #f1172d;
            margin-top: 31px;
        }
    }
    .note {
        color: #f71818;
        text-align: center;
        font-size: 14px;
        margin-top: -20px;
        margin-bottom: 25px;
    }
    hr.shadow {
        height: 10px;
        border: 0;
        box-shadow: 0 10px 10px -10px #8c8b8b inset;
    }
    hr.linear {
        border: 0;
        height: 1px;
        background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
        background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
        background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
        background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    }
    .speeches {
        margin-top: 20px;
        .speeches-head {
            margin-top: 10px;
            &.topic {
                min-height: 550px;
            }
            .speeches-img {
                margin: 0 auto;
                width: 70%;
            }
            .speeches-img.small {
                width: 40%;
                border-radius: 40px;
            }
            .caption {
                text-align: center;
                h3 {
                    font-size: 20px;
                }
            }
            .word {
                width: 90%;
                display: block;
                margin: auto;
            }
        }
        .speeches-content {
            margin-bottom: 10px;
            p {
                text-indent: 20px;
                line-height: 1.7;
            }
        }
    }
    .staff {
        .staff-item-wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 10px;
            .staff-item {
                width: 96px;
                &:nth-child(16) {
                    margin: 0 auto;
                }
                img {
                    width: 75px;
                    height: 95px;
                    border-radius: 15%;
                    margin: 0 auto;
                }
                h4 {
                    text-align: center;
                    font-size: 12px;
                }
            }
        }
    }
    .member {
        .member-wrapper {
            .member-item {
                .thumbnail {
                    &.regular-item {
                        position: relative;
                        .flat-logo {
                            min-height: 130px;
                            @media screen and (min-width: 375px) {
                                min-height: 150px;
                            }
                            padding-top: 50px;
                        }
                        .square-logo {
                            height: 130px;
                            @media screen and (min-width: 375px) {
                                height: 150px;
                            }
                        }
                        img {
                            min-width: 120px;
                            margin: auto;
                            &.img-sfb {
                                width: 90%;
                            }
                        }
                        .caption {
                            padding: 2px;
                            height: 60px;
                            @media screen and (min-width: 375px) {
                                height: 60px;
                            }
                            h4 {
                                text-align: center;
                                font-size: 12px;
                                line-height: 1.5;
                            }
                        }
                        a {
                            position: absolute;
                            display: block;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            text-indent: -9999px;
                            z-index: 1000;
                        }
                    }
                }
                &.y-tech {
                    .square-logo {
                        height: 130px;
                        @media screen and (min-width: 375px) {
                            height: 150px;
                        }
                        a {
                            display: block;
                        }
                        .logo {
                            width: 70%;
                        }
                        .qr {
                            width: 80%;
                            margin: auto;
                        }
                    }
                    .caption {
                        position: relative;
                        padding: 2px;
                        height: 60px;
                        @media screen and (min-width: 375px) {
                            height: 60px;
                        }
                        h4 {
                            text-align: center;
                            font-size: 12px;
                            line-height: 1.5;
                        }
                        a {
                            position: absolute;
                            display: block;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            text-indent: -9999px;
                            z-index: 1000;
                        }
                    }
                }
            }
        }
        .member-list {
            ul {
                -webkit-padding-start: 3px;
                li {
                    list-style: none;
                    margin-top: 5px;
                    font-size: 16px;
                    line-height: 2;
                    a {}
                }
            }
        }
    }
    .footer {
        background-color: #f71818;
        height: 120px;
        margin-top: 50px;
        padding: 16px;
        @media screen and (min-width: 375px) {
            padding: 20px;
        }
        h4 {
            display: block;
            color: #ffffff;
            text-align: center;
        }
        a {
            color: #ffffff;
            display: block;
            margin: 10px auto;
            text-align: center;
        }
    }
}